import {LockOutlined, UserOutlined} from "@ant-design/icons";
import {LoginForm, ProConfigProvider, ProFormText,} from "@ant-design/pro-components";
import {message} from "antd";
import {EmailPush} from "@icon-park/react";
import {NavLink, useNavigate} from "react-router-dom";
import {register} from "../../api/userController.ts";
import BaseResponseBoolean_ = API.BaseResponseBoolean;

export default function Register() {
  const navigate = useNavigate();

  const handleLogin = async (values: API.LoginDto) => {
    let res: BaseResponseBoolean_ = await register(values);
    if (res.code === 200) {
      message.success("注册成功！");
      navigate("/login", { replace: true });
    } else {
      console.log("123123123");
    }
  };

  return (
    <div
      className={"login flex justify-center items-center"}
      style={{ height: "calc(100vh - 125px)" }}
    >
      <ProConfigProvider hashed={false}>
        <div>
          <LoginForm
            logo="https://xinggui-1311139524.cos.ap-guangzhou.myqcloud.com/logo.png"
            title="用户注册"
            subTitle="欢迎来到星轨-图书借阅系统"
            onFinish={handleLogin} // 处理登录逻辑
            submitter={{
              searchConfig: { submitText: "注册" }, // 修改按钮文案为“注册”
            }}
          >
            <>
              <ProFormText
                fieldProps={{
                  size: "large",
                  prefix: <UserOutlined className={"prefixIcon"} />,
                }}
                name="username"
                placeholder={"请输入用户名"}
                rules={[
                  {
                    required: true,
                    message: "请输入用户名",
                  },
                  {
                    pattern: /^[a-zA-Z0-9.]+$/,
                    message: "用户名格式错误！",
                  },
                ]}
              />
              <ProFormText
                fieldProps={{
                  size: "large",
                  prefix: <EmailPush theme="outline" size="18" fill="#333" />,
                }}
                name="email"
                placeholder={"请输入邮箱号"}
                rules={[
                  {
                    required: true,
                    message: "请输入邮箱号",
                  },
                  {
                    pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                    message: "邮箱格式错误！请输入有效的邮箱地址。",
                  },
                ]}
              />
              <ProFormText.Password
                name="password"
                fieldProps={{
                  size: "large",
                  prefix: <LockOutlined className={"prefixIcon"} />,
                }}
                placeholder={"请输入您的密码"}
                rules={[
                  {
                    required: true,
                    message: "请输入密码！",
                  },
                ]}
              />
              {/*                            <ProFormCaptcha
                                fieldProps={{
                                    size: 'large',
                                    prefix: <LockOutlined className={'prefixIcon'}/>,
                                }}
                                captchaProps={{
                                    size: 'large',
                                }}
                                placeholder={'请输入验证码'}
                                captchaTextRender={(timing, count) => {
                                    if (timing) {
                                        return `${count} ${'获取验证码'}`;
                                    }
                                    return '获取验证码';
                                }}
                                name="captcha"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入验证码！',
                                    },
                                ]}
                                onGetCaptcha={async () => {
                                    message.success('获取验证码成功！验证码为：1234');
                                }}
                            />*/}
            </>
            <div
              style={{
                marginBlockEnd: 24,
              }}
              className={"flex justify-between items-center"}
            >
              <NavLink to={"/login"}>去登陆</NavLink>
              <a>忘记密码</a>
            </div>
          </LoginForm>
        </div>
      </ProConfigProvider>
    </div>
  );
}
